<template>
  <div>
    <Head :headIndex="2"></Head>
    <div class="reset-box">
      <div class="reset-password">
        <span class="resetText">重置密码</span>
        <div class="resetFirst" v-show="showRaw">
          <el-input placeholder="请输入手机号" class="inputBackground public" />
          <el-input placeholder="请输入短信验证码" class="public">
            <template #append>
              <span class="get-code" @click="startCountdown">{{
                buttonText
              }}</span>
            </template>
          </el-input>
          <el-button
            type="primary"
            class="public resetButton"
            @click="nextReset"
            >下一步</el-button
          >
        </div>
        <div class="resetFirst" v-show="!showRaw">
          <el-form :model="form" class="resetInput">
            <div class="new-box">
              <span class="newText">新密码：</span>
              <el-input
                type="password"
                v-model="form.name"
                class="newPassword"
                clearable
                show-password
                placeholder="请输入密码"
              />
            </div>
            <div class="new-box">
              <span class="newText">重复新密码：</span>
              <el-input
                type="password"
                v-model="form.newName"
                class="newPassword"
                clearable
                placeholder="请输入重复新密码"
              />
            </div>
          </el-form>
          <el-button type="primary" class="public resetButton">确定</el-button>
        </div>
      </div>
      <el-button
        type="primary"
        link
        icon="ArrowLeft"
        class="backIcon"
        @click="backLogin"
        >返回</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Head from "../../components/head.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const showRaw = ref(true);
const form = ref({});
// 设置倒计时的初始值
const isCounting = ref(false);
const buttonText = ref("获取验证码");
const timer = ref(null);
const startCountdown = () => {
  if (!isCounting.value) {
    buttonText.value = "60秒后重发";
    isCounting.value = true;
    let secondsLeft = 60;
    timer.value = setInterval(() => {
      secondsLeft--;
      buttonText.value = `${secondsLeft}秒后重发`;
      if (secondsLeft === 0) {
        clearInterval(timer.value);
        buttonText.value = "获取验证码";
        isCounting.value = false;
      }
    }, 1000);
  }
};
const backLogin = () => {
  router.go(-1);
};
const nextReset = () => {
  showRaw.value = false;
};
</script>
<style lang="scss" scoped>
.reset-box {
  margin: auto;
  margin-top: 275px;
  display: flex;
  flex-direction: column;
  .reset-password {
    margin: auto;
    width: 672px;
    background: #ffffff;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 16px 16px 16px 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 32px 0 64px 0;
  }
}
.resetFirst {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}
.inputBackground {
  background: #f5f7fa;
}
.public {
  margin: auto;
  width: 414px;
  height: 48px;
  border-radius: 6px 6px 6px 6px;
}
.resetText {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  font-style: normal;
  text-transform: none;
}
.newText {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #86909c;
  line-height: 16px;
  font-style: normal;
  text-transform: none;
}
.get-code {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #165dff;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
.resetButton {
  margin-top: 16px;
  background: #165dff;
}
.backIcon {
  margin-top: 32px;
}
.new-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.resetInput {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.newPassword {
  width: 344px;
  height: 48px;
  border-radius: 6px 6px 6px 6px;
}
</style>
<style scoped>
::v-deep .el-input__wrapper {
  background-color: #f5f7fa;
  box-shadow: none;
}
::v-deep .el-input-group__append {
  box-shadow: none;
}
</style>

